$def with(data_list,pages,current_page,stations,count,selected_station_name,selected_start_date,selected_end_date)

<h3 class="page-title">每日均值数据</h3>


<div class="tool_bar_buttons">
    <form action="/day_data" class="form-inline" >
        <select name="station_name" class="input-middle">
            <option value="">选择监测站</option>
            $for station in stations:
                $if selected_station_name!=None and  station.name==selected_station_name:
                        <option value="$station.name" selected="selected">$station.name</option>
                $else:
                        <option value="$station.name" >$station.name</option>
        </select>
        日期范围
        <div class="controls input-append date form_date"  data-date-format="yyyy-mm-dd" data-link-field="dateStart" data-link-format="yyyy-mm-dd">
                    <input size="8" type="text" value="$selected_start_date" readonly>
                    <span class="add-on"><i class="icon-remove"></i></span>
					<span class="add-on"><i class="icon-th"></i></span>
                </div>
				<input name="dateStart" type="hidden" id="dateStart" value="$selected_start_date" />--
        <div class="controls input-append date form_date"  data-date-format="yyyy-mm-dd" data-link-field="dateEnd" data-link-format="yyyy-mm-dd">
                    <input size="8" type="text" value="$selected_end_date" readonly>
                    <span class="add-on"><i class="icon-remove"></i></span>
					<span class="add-on"><i class="icon-th"></i></span>
                </div>
				<input name="dateEnd"  type="hidden" id="dateEnd" value="$selected_end_date" />

        <button type="submit" class="btn btn-primary">查询</button>
        <a href="/day_data/export?station_name=$selected_station_name&dateStart=$selected_start_date&dateEnd=$selected_end_date" class="btn "><i class="icon-share"></i> 导出数据</a>

    </form>
</div>
<div class="">
    <table class="table table-striped table-bordered rounded-corner">
        <thead>
        <tr>
            <th>监测站</th>
            <th>日期</th>
            <th>NO₂(μg/m³)</th>
            <th>O₃(μg/m³)</th>
            <th>PM10(μg/m³)</th>
            <th>PM2.5(μg/m³)</th>
            <th>CO(mg/m³)</th>
            <th>SO₂(μg/m³)</th>
            <th>湿度(%rh)</th>
            <th>风向(a)</th>
            <th>风速(m/s)</th>
            <th>大气压(MPa)</th>
            <th>温度(°C)</th>

        </tr>
        </thead>
        <tbody>

        $ i=0
        $ line_style='even'
        $for data in data_list:
            $if i&1 :
                $ line_style='odd'
            $else:
                $ line_style='even'
            $ i=i+1
            <tr class="$line_style">
                <td>$data.site</td>
                <td>$data.collection_date</td>
                <td>$data.avg_no2</td>
                <td>$data.avg_o3</td>
                <td>$data.avg_pm10</td>
                <td>$data.avg_pm25</td>
                <td>$data.avg_co</td>
                <td>$data.avg_so2</td>
                <td>$data.avg_humidity</td>
                <td>$data.avg_wind_direction</td>
                <td>$data.avg_wind_speed</td>
                <td>$data.avg_atmosphere</td>
                <td>$data.avg_temperature</td>

            </tr>

        </tbody>
    </table>

    <div class="pagination">
    	<ul id="pagingDiv">
        </ul>
    </div>

</div>

<script>
$$(document).ready(function(){
	//首先获取当前的总页数，一般是后台传递过来的，这里假定40页。
    var total = $pages;//document.getElementById("total").innerHTML;
	//id="pagingDiv"的div通过pagingConstruct函数构造，比如加载网页是第1页的
    pagingConstruct($current_page);
	//形式参数paging是指当前页
    function pagingConstruct(paging){
		//先更新一下行内文本
        //document.getElementById("pagingText").innerHTML = paging;
        var pagingDivInnerHTML = "";
		//这里是加载省略号的flag
        var isHiddenExist = 0;
		//从第1页读到第40页。
        for (var i = 1; i <= total; i++) {
			//如果读到当前页，就仅仅加载一个文本，不放链接
            if (i == paging) {
                pagingDivInnerHTML +=  "<li class='active'><a href='#' onclick='pagingConstruct(" + i + ")'>" + i + "</a></li> ";
            }
            else {
				//如果是页首，中间页，页尾，当前页的前后三页则不省略。
                if (i < 4 || i < (paging + 3) && i > (paging - 3) || i > (total / 2 - 2) && i < (total / 2 + 2) || i > (total - 3)) {
                    pagingDivInnerHTML += "<li><a href='/day_data/index/"+i+"?station_name=$selected_station_name&dateStart=$selected_start_date&dateEnd=$selected_end_date' onclick='pagingConstruct(" + i + ")'>" + i + "</a></li> ";
                    isHiddenExist = 0;
                }
				//否则就构造...
                else {
                    if (isHiddenExist == 0) {
                        pagingDivInnerHTML +=  "<li><a href='#'>" + "..." + "</a></li> ";
                        isHiddenExist = 1;
                    }
                }
            }
        }
		//把构造的内容放上去pagingDiv
        document.getElementById("pagingDiv").innerHTML = pagingDivInnerHTML;
    }
    $$('.form_datetime').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		forceParse: 0,
        showMeridian: 1
    });
    $$('.form_date').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		minView: 2,
		forceParse: 0
    });
	$$('.form_time').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 1,
		minView: 0,
		maxView: 1,
		forceParse: 0
    });
    })
</script>
